<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Tutee an Education Category  Responsive Web Template| Home</title>

    <!-- Template CSS -->
    <link rel="stylesheet" href="assets/css/style-liberty.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
  </head>
  <body id="home">
<section class=" w3l-header-4">
	<!--header-->
	<header id="site-header">
		<div class="container">
			<nav class="navbar navbar-expand-lg navbar-dark stroke">
				<h1><a class="navbar-brand" href="index.html">
					<span class="fa fa-book"></span> Tutee
				</a></h1>
				<!-- if logo is image enable this   
			<a class="navbar-brand" href="#index.html">
				<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
			</a> -->
				<button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
					<span class="navbar-toggler-icon fa icon-close fa-times"></span>
					
				</button>
	  
				<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item active">
							<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item @@about__active">
							<a class="nav-link" href="about.html">About</a>
						</li>
						<li class="nav-item @@services__active">
							<a class="nav-link" href="services.html">Services</a>
						</li>
						<li class="nav-item dropdown @@pages__active">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Pages <span class="fa fa-angle-down"></span>
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="blog.html">Blog  posts</a>
								<a class="dropdown-item" href="blog-single.html">Blog single</a>
								<a class="dropdown-item" href="landing-page.html">Landing page</a>
							</div>
						</li>
						<!-- <li class="nav-item @@contact__active">
							<a class="nav-link" href="contact.html"></a>
						</li> -->
							<li class="nav-item mr-2">
								<a href="contact.html" class="btn btn-primary register d-lg-block btn-style">Contact</a>
						</li>
					</ul>
				</div>
				        <!-- toggle switch for light and dark theme -->
						<div class="mobile-position">
							<label class="theme-selector">
							  <input type="checkbox" id="themeToggle">
							  <i class="gg-sun"></i>
							  <i class="gg-moon"></i>
							</label>
						  </div>
						  <!-- //toggle switch for light and dark theme -->
			</nav>
		</div>
	  </header>
	<!--/header-->
</section>
<script src="assets/js/jquery-3.3.1.min.js"></script> <!-- Common jquery plugin -->
<!--bootstrap working-->
<script src="assets/js/bootstrap.min.js"></script>
<!--bootstrap working//-->
<!--/MENU-JS-->
<script>
	$(window).on("scroll", function () {
	  var scroll = $(window).scrollTop();
  
	  if (scroll >= 80) {
		$("#site-header").addClass("nav-fixed");
	  } else {
		$("#site-header").removeClass("nav-fixed");
	  }
	});
  
	//Main navigation Active Class Add Remove
	$(".navbar-toggler").on("click", function () {
	  $("header").toggleClass("active");
	});
	$(document).on("ready", function () {
	  if ($(window).width() > 991) {
		$("header").removeClass("active");
	  }
	  $(window).on("resize", function () {
		if ($(window).width() > 991) {
		  $("header").removeClass("active");
		}
	  });
	});
  </script>
  <!--//MENU-JS-->
<!-- disable body scroll which navbar is in active -->
<script>
$(function () {
  $('.navbar-toggler').click(function () {
    $('body').toggleClass('noscroll');
  })
});
</script>
<!-- disable body scroll which navbar is in active -->
<!--theme switcher dark and light mode script-->
<script>
	const bodyElement = document.querySelector('body');
	const themeToggle = document.querySelector('#themeToggle');
	const darkModeMql = window.matchMedia('(prefers-color-scheme: dark)');
  
	const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : userPreference(darkModeMql);
  
	if (currentTheme) {
	  bodyElement.classList.add(currentTheme);
  
	  if (currentTheme === 'dark') {
		themeToggle.checked = true;
	  }
	}
  
	function userPreference(e) {
	  if (e.matches) {
		bodyElement.classList.add("dark");
		return "dark"
	  } else {
		bodyElement.classList.remove("dark");
		return ""
	  }
	}
  
	darkModeMql.addListener(userPreference);
  
	function themeSwitcher(e) {
	  if (e.target.checked) {
		bodyElement.classList.add('dark');
		localStorage.setItem('theme', 'dark');
	  } else {
		bodyElement.classList.remove('dark');
		localStorage.setItem('theme', '');
	  }
	}
  
	themeToggle.addEventListener('change', themeSwitcher);
  </script>
  <!--theme switcher dark and light mode script//-->


<section class="w3l-hero-headers-9" id="home">
  <div class="slide header11" data-selector="header11">
      <div class="container">
          <div class="banner-text ">
              <h5 class=" ">Present Education<br> in beautiful way!</h5>
              <p class=" ">Adipi sicing elit. Quia, aliquid voluptatum corporis Dicta. Deleniti possimus culpa nemo asperiores aperiam mollitia, maiores Lorem ipsum dolor.</p>
              <div >
                <form class="form-inline forms-gds" action="#" method="post">
                <input type="email" name="" placeholder="Email" required="">
                <button class="btn btn-style btn-primary">Subscribe</button>
              </form>
            </div>
          </div>
      </div>
  </div>
</section>

<section class="w3l-call-to-action_9">
    <div class="call-w3">
        <div class="container">
            <div class="booking-form-content">
                <div class="main-titles-head ">
                <h3 class="header-name">You Can learn anything
                </h3>
                <p class="tiltle-para editContent ">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic fuga sit illo modi aut aspernatur tempore laboriosam saepe dolores eveniet.</p>
            </div>
               <div class="row text-center">
                <div class="col-lg-4 col-md-6 propClone about-line-top ">
                    <div class="area-box color-white editContent box-active">
                        <div class="icon-back"><span class="fa fa-thumbs-up"></span></div>
                        
                    <h5><a href="blog.html" class="editContent">
                        Unlimited Access</a></h5>
                    <p class="para editContent">Sit amet consect etur adipi sicing elit. Rem quib usdam corporis, dolores
                        quos, nobis culpa est</p>
            </div>
            </div>
            <div class="col-lg-4 col-md-6 propClone about-line-top ">
                <div class="area-box color-white editContent">
                    <div class="icon-back"><span class="fa fa-users"></span></div>
                    
                <h5><a href="blog.html" class="editContent">
                    Expert Teachers</a></h5>
                <p class="para editContent">Sit amet consect etur adipi sicing elit. Rem quib usdam corporis, dolores
                    quos, nobis culpa est</p>
        </div>
        </div>
        <div class="col-lg-4 col-md-6 propClone about-line-top">
            <div class="area-box color-white editContent box-active">
                <div class="icon-back"><span class="fa fa-pencil"></span></div>
                
            <h5><a href="blog.html" class="editContent">
                Learn Anything</a></h5>
            <p class="para editContent">Sit amet consect etur adipi sicing elit. Rem quib usdam corporis, dolores
                quos, nobis culpa est</p>
    </div>
    </div>
    <div class="col-lg-4 col-md-6 propClone about-line-top ">
        <div class="area-box color-white editContent">
            <div class="icon-back"><span class="fa fa-book"></span></div>
            
        <h5><a href="blog.html" class="editContent">
            Many Courses</a></h5>
        <p class="para editContent">Sit amet consect etur adipi sicing elit. Rem quib usdam corporis, dolores
            quos, nobis culpa est</p>
</div>
</div>
<div class="col-lg-4 col-md-6 propClone about-line-top ">
    <div class="area-box color-white editContent box-active">
        <div class="icon-back"><span class="fa fa-star"></span></div>
        
    <h5><a href="blog.html" class="editContent">
        Bright Future</a></h5>
    <p class="para editContent">Sit amet consect etur adipi sicing elit. Rem quib usdam corporis, dolores
        quos, nobis culpa est</p>
</div>
</div>
<div class="col-lg-4 col-md-6 propClone about-line-top ">
    <div class="area-box color-white editContent">
        <div class="icon-back"><span class="fa fa-check"></span></div>
        
    <h5><a href="blog.html" class="editContent">
        Verified Course</a></h5>
    <p class="para editContent">Sit amet consect etur adipi sicing elit. Rem quib usdam corporis, dolores
        quos, nobis culpa est</p>
</div>
</div>
               </div>
            </div>
        </div>
    </div>
</section>

<section class="w3l-specification-6">
    <div class="specification-layout editContent">
        <div class="container">
				<div class="grid">
					<figure class="effect-apollo ser-bg1">
						<figcaption>
							<h5><a href="#url">Successfully Trained</a></h5>
							<p class="para">Lorem ipsum dolor sit amet.Sit amet consect etur adipi sicing elit.</p>
						</figcaption>			
					</figure>
					<figure class="effect-apollo ser-bg2">
						<figcaption>
							<h5><a href="#url">We Proudly Received</a></h5>
							<p class="para">Lorem ipsum dolor sit amet.Sit amet consect etur adipi sicing elit.</p>
						</figcaption>			
					</figure>
					<figure class="effect-apollo ser-bg3">
						<figcaption>
							<h5><a href="#url">We Are Getting Featured On</a></h5>
							<p class="para">Lorem ipsum dolor sit amet.Sit amet consect etur adipi sicing elit.</p>
						</figcaption>			
					</figure>
					<figure class="effect-apollo ser-bg4">
						<figcaption>
							<h5><a href="#url">Firmly Established</a></h5>
							<p class="para">Lorem ipsum dolor sit amet.Sit amet consect etur adipi sicing elit.</p>
						</figcaption>			
					</figure>
				</div>
                  </div>
        </div>
</section>

<section class="w3l-covers-18">
        <div class="covers-main editContent">
            <div class="container">
              <div class="main-titles-head ">
                <h3 class="header-name">Browse our top courses
                </h3>
                <p class="tiltle-para editContent ">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic fuga sit illo modi aut aspernatur tempore laboriosam saepe dolores eveniet.</p>
            </div>
                <div class="gallery-image row">
                  <div class="col-lg-4 col-md-6">
                    <img src="assets/images/b2.jpg" alt="product" class="img-responsive ">
                    <div class="img-box">
                    <h5 class="mb-2"><a href="about.html">Branding Design</a></h5>
                    <div class="blog-date"> 
                    <p class="pos-date"><span class="fa fa-calendar mr-1"></span>7 April</p> <p class="pos-date"><span class="fa fa-eye mr-1"></span> 3286 Views</p></div>
                    <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet itaque labor.</p>
                    </div>
                  </div>
                  <div class=" col-lg-4 col-md-6 top-top2">
                    <img src="assets/images/b1.jpg" alt="product" class="img-responsive ">
                    <div class="img-box">
                    <h5 class="mb-2"><a href="about.html">Art Design</a></h5>
                    <div class="blog-date"> 
                      <p class="pos-date"><span class="fa fa-calendar mr-1"></span>7 April</p> <p class="pos-date"><span class="fa fa-eye mr-1"></span> 3286 Views</p></div>
                      <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet itaque labor.</p>
                  </div>
                </div>
                  <div class="col-lg-4 col-md-6 top-top">
                    <img src="assets/images/b3.jpg" alt="product" class="img-responsive ">
                    <div class="img-box">
                    <h5 class="mb-2"><a href="about.html">Programming</a></h5>
                    <div class="blog-date"> 
                      <p class="pos-date"><span class="fa fa-calendar mr-1"></span>7 April</p> <p class="pos-date"><span class="fa fa-eye mr-1"></span> 3286 Views</p></div>
                      <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet itaque labor.</p>
                  </div>
                  </div>
                  </div>
                </div>
            </div>
        </div>
    </section>
<section class="w3l-teams-15">
	<div class="team-single-main editContent">
		<div class="container">

		<div  class="row">
			<div class="column2 col-lg-6">
			
				<img src="assets/images/b6.jpg" alt="product" class="img-responsive ">
			</div>
				<div class="nature-row  coloum4 col-lg-6 align-self">
					<h6 class="small-title">HOW WE WORK</h6>
						<h3>Your bright future is our mission!. </h3>
					<p class="para editContent text ">
						Moll itia placeat modi expl icabo volup tatum corporis unde Dicta, provident
						Rem adipisci Moll itia placeat modi volup tatem tenetur conse quatur.Conseq tenetur conse quatur adipi sicing elit.</p>
						<a href="about.html" class="action-button btn mt-lg-5 mt-4">Read more</a>
					</div>
				</div>
		</div>
		</div>
	</div>
</section>

<section class="w3l-clients" id="client">
    <div class="call-w3">
        <div class="container">
            <!-- main-slider -->
            <div class="main-slider text-center">
                <div class="csslider infinity" id="slider1">
                    <input type="radio" name="slide" checked="checked" id="slides_1">
                    <input type="radio" name="slide" id="slides_2">
                    <input type="radio" name="slide" id="slides_3">
                    <ul>
                        <li>
                            <div class="slider-info">
                                <div class="d-grid hh14-text">
                                    <img class="img-responsive" src="assets/images/c3.jpg" alt="image">
                                    <div class="hh14-info">
                                        <h6>Limitless learning</h6>
                                        <p class="para">Consectetur adipisicing Lorem ipsum dolor sit amet,elit, sed do
                                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                            minim incididunt ut labore et dolore magna aliqua. Ut enim ad
                                            minim.</p>
                                      <h4>Jack Willson</h4>
                                    </div>

                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="slider-info">
                                <div class="d-grid hh14-text">
                                    <img class="img-responsive" src="assets/images/c1.jpg" alt="image">
                                    <div class="hh14-info">
                                        <h6>World's best courses</h6>
                                        <p class="para">Consectetur adipisicing Lorem ipsum dolor sit amet,elit, sed do
                                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                            minim incididunt ut labore et dolore magna aliqua. Ut enim ad
                                            minim.</p>
                                            <h4>Nike samson</h4>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="slider-info">
                                <div class="d-grid hh14-text">
                                    <img class="img-responsive" src="assets/images/c2.jpg" alt="image">
                                    <div class="hh14-info">
                                        <h6>Popular Courses</h6>
                                        <p class="para">Consectetur adipisicing Lorem ipsum dolor sit amet,elit, sed do
                                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                            minim incididunt ut labore et dolore magna aliqua. Ut enim ad
                                            minim.</p>
                                            <h4>Milky Deo</h4>
                                    </div>

                                </div>
                            </div>
                        </li>
                    </ul>
                    <!-- <div class="arrows">
                        <label for="slides_1"></label>
                        <label for="slides_2"></label>
                        <label for="slides_3"></label>
                        <label for="slides_4"></label>
                    </div> -->
                    <div class="navigation">
                        <div>
                            <label for="slides_1"></label>
                            <label for="slides_2"></label>
                            <label for="slides_3"></label>
                        </div>
                </div>
            </div>
            <!-- /main-slider -->
        </div>
    </div>
        </div>
</section>

<section class="w3l-footer-29-main">
	<div class="footer-29 py-5 ">
	  <div class="container">
		<div class="grid-col-4 footer-top-29">
			<div class="footer-list-29 footer-1">
				<h2 class="footer-title-29">About Us</h2>
<p class="para">Ipsum dolor sit amet, consectetur adipisicing elit. Itaque quis repellendus nesciunt quam cupiditate explicabo modi non error consequatur sunt molestiae laboriosam adipisci voluptatem possimus</p>
				<div class="main-social-footer-29">
					<a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a>
					<a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a>
					<a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a>
					<a href="#google-plus" class="google-plus"><span class="fa fa-google-plus"></span></a>
					<a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a>
				</div>
			</div>
			<div class="footer-list-29 footer-2">
				<ul>
					<h6 class="footer-title-29">Latest News</h6>
					<li><a href="#pages">Programming language</a>
					<h5><a href="#pages">by Admin</a></h5></li>
					<li><a href="#pages">Graduate Admissions</a><h5><a href="#pages">by Admin</a></h5></li>
					<li><a href="#pages">Committed to educating</a><h5><a href="#pages">by Admin</a></h5></li>
				</ul>
			</div>
			<div class="footer-list-29 footer-3">
				<div class="properties">
					<h6 class="footer-title-29">Contact Us</h6>

				<ul>
					<li><p><span class="fa fa-map-marker"></span>California, #32841 block,
						#221DRS 75 West Rock,
						Maple Building, UK.</p></li>
					<li><a href="tel:+7-800-999-800"><span class="fa fa-phone"></span> +(21)-255-999-8888</a></li>
					<li><a href="#" class="mail"><span class="fa fa-envelope-open-o"></span> <span class="__cf_email__">admin@domain.com</span></a></li>
				</ul>
			</div>
			</div>
			<div class="footer-list-29 footer-4">
				<ul>
					<h6 class="footer-title-29">Useful Links</h6>
					<li><a href="#url">Forums</a></li>
					<li><a href="#url">Our Teachers</a></li>
					<li><a href="#url">Upcoming Events</a></li>
					<li><a href="#url">Popular Courses</a></li>
					<li><a href="#url">Verified Course</a></li>
				</ul>
			</div>
		</div>
		<div class=" bottom-copies row">
			<p class="copy-footer-29 col-lg-8">© Tutee. All rights reserved | <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
			<ul class="list-btm-29 col-lg-4">
				<li><a href="#link">Privacy policy</a></li>
				<li><a href="#link">Terms of service</a></li>
			  </ul>
		</div>
		</div>
	</div>
  </section>

<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
	<span class="fa fa-level-up"></span>
</button>
<script>
	// When the user scrolls down 20px from the top of the document, show the button
	window.onscroll = function () {
		scrollFunction()
	};

	function scrollFunction() {
		if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
			document.getElementById("movetop").style.display = "block";
		} else {
			document.getElementById("movetop").style.display = "none";
		}
	}

	// When the user clicks on the button, scroll to the top of the document
	function topFunction() {
		document.body.scrollTop = 0;
		document.documentElement.scrollTop = 0;
	}
</script>
<!-- /move top -->


</body>

</html>
